<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Examples -- Really Simple Validation for jQuery .</title>

    <meta name="keyword" content=""/>
    <meta name="description" content=""/>
    <meta name="copyright" content="Copyright 1994-2010 Motorola, Inc. All Rights Reserved."/>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.rsv-2.5.1.js" type="text/javascript"></script>

    <style type="text/css">
    /* these are the various classes used to style the demo error fields */
    .errorField {
      background-color: #990000;
      color: white;
    }
    .errorFieldDemo2 {
      background-color: #ffffcc;
      color: #990000;
    }
    .errorFieldDemo5 {
      background-color: #ffffcc;
      border: 1px solid #aa0000;
      color: #aa0000;
    }
    .errorFieldDemo6 {
      background-color: green;
      color: yellow;
    }
    </style>
    
    
    <script type="text/javascript">

  // a custom onComplete handler to prevent form submits for the demo
  function myOnComplete()
  {
    alert("The form validates! (normally, it would submit the form here).");
    return false;
  }


$(document).ready(function() {
    $("#demo_form2").RSV({
      onCompleteHandler: myOnComplete,
      displayType: "display-html",
      errorFieldClass: "errorFieldDemo2",
        rules: [
            "required,first_name,Please enter your first name.",
            "required,last_name,Please enter your last name.",
            "required,email,Please enter your email address.",
            "valid_email,email,Please enter a valid email address.",
            "required,any_integer,Please enter your age.",
            "digits_only,any_integer,The age field may only contain digits.",
            "required,marital_status,Please enter your marital status."
        ]
    });
}); </script>

    <style type="text/css">
    /* these are the various classes used to style the demo error fields */
    .errorField {
      background-color: #990000;
      color: white;
    }
    .errorFieldDemo2 {
      background-color: #ffffcc;
      color: #990000;
    }
    .errorFieldDemo5 {
      background-color: #ffffcc;
      border: 1px solid #aa0000;
      color: #aa0000;
    }
    .errorFieldDemo6 {
      background-color: green;
      color: yellow;
    }
    </style>

</head>
<body>
    <p class="subtitle blue">#2: A second example</p>

    <p>
      This is exactly the same form as #1 with exactly the same validation rules. The only change is
      that it uses the <b>display-html</b> value for the <b>displayType</b> configuration option, with
      a single hidden &lt;div&gt; tag in the page, used as a placeholder to target the errors. Also,
      it defines a custom error class (<b>.errorFieldDemo2</b>) for the error message fields - making
      them appear with a yellow background and red text.
    </p>

        <div id="rsvErrors"></div>

    <form action="" method="post" id="demo_form2">

      <table class="demoTable" cellpadding="0" cellspacing="1">
      <tr>
        <th width="150">First Name:</th>
        <td><input type="text" name="first_name" /></td>
      </tr>
      <tr>
        <th>Last Name:</th>
        <td><input type="text" name="last_name" /></td>
      </tr>
      <tr>
        <th>Email:</th>
        <td><input type="text" name="email" /></td>
      </tr>
      <tr>
        <th>Your age:</th>
        <td><input type="text" name="any_integer" /></td>
      </tr>
      <tr>
        <th>Marital Status:</th>
        <td>
                <input type="radio" id="ms1" name="marital_status" value="single" /><label for="ms1">Single</label><br />
              <input type="radio" id="ms2" name="marital_status" value="married" /><label for="ms2">Married</label><br />
                <input type="radio" id="ms3" name="marital_status" value="none_of_your_business" /><label for="ms3">None of your bloomin' business</label>
            </td>
      </tr>
      </table>

      <p><input type="submit" value="SUBMIT" /></p>

    </form>
  </body>
</html>
